<template>
  <div>
    <el-dialog title="添加设备" :visible.sync="visible" width="30%" @close="close">
      <div>
        <el-form :model="form" ref="form" :rules="rules" label-width="100px" :inline="false" size="normal">
          <el-form-item label="设备编号:" prop="deviceNo">
            <el-select v-model="form.deviceNo" placeholder="请选择设备" filterable @change="changeDevice" value-key="deviceNo">
              <el-option v-for="item in unBindList" :key="item.deviceNo" :label="item.deviceNo" :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="SIM卡号:" prop="simCard">
            <el-input v-model="form.simCard" placeholder="选择设备编号后自动填充" disabled></el-input>
          </el-form-item>
          <el-form-item label="设备供应商:" prop="manufacturer">
            <!-- <el-input v-model="form.deviceManufacturer" placeholder="选择设备编号后自动填充" disabled></el-input> -->
            <dict-tag :options="dict.type.manufacturer" :value="form.manufacturer" />
          </el-form-item>
          <el-form-item label="设备型号" prop="equipmentModel">
            <!-- <el-input v-model="form.modelNum" placeholder="选择设备编号后自动填充" disabled></el-input> -->
            <dict-tag :options="dict.type.equipmentModel" :value="form.equipmentModel" />
          </el-form-item>
          <el-form-item label="设备类型" prop="deviceKind">
            <el-tag v-if="form.deviceKind == 1">有线设备</el-tag>
            <el-tag v-else-if="form.deviceKind == 2">无线设备</el-tag>
          </el-form-item>
        </el-form>

      </div>
      <span slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="confim">确定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import { noBindList } from '@/api/car/car_basic';
export default {
  dicts: ['manufacturer', 'equipmentModel'],
  data() {
    return {

      visible: false,
      deviceList: [],
      unBindList: [],
      form: {
        deviceNo: '',
        simCard: '',
        manufacturer: '',
        equipmentModel: '',
        deviceKind: 0
      },
      rules: {
        deviceNo: [
          {
            required: true,
            message: '设备编号不能为空',
            trigger: 'change',
          },
        ],
      }
    }
  },
  mounted() {
    this.getDeviceList();
  },
  methods: {
    changeDevice(e) {
      this.form = { ...e };
    },
    getDeviceList() {
      noBindList().then(res => {
        this.deviceList = res.data;
      })
    },
    show(bindList) {
      if (bindList.length > 0) {
        this.unBindList = this.deviceList.filter((item) => {
          return !bindList.some(ele => ele.deviceNo === item.deviceNo);
        })
      } else {
        this.unBindList = this.deviceList;
      }
      if (this.$refs.form != undefined) {
        this.$refs.form.resetFields();
      }
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
    confim() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.close();
          let currentDevice = { ...this.form };
          this.$emit('success', currentDevice);
        }
      });
    }
  },
}
</script>
<style lang="">
  
</style>